<template>
	<view class="content">
        <view style="display: flex;justify-content: center;padding:10px;align-items: center;">
			<view style="width:30%;text-align: right;">基本使用：</view>
            <view style="width:50%;">
                <ep-select v-model="select" :options="options" @change="change"></ep-select>
            </view>
        </view>
        
        <view style="display: flex;justify-content: center;padding:10px;align-items: center;">
        	<view style="width:30%;text-align: right;">禁用：</view>
            <view style="width:50%;">
                <ep-select v-model="select2" :options="options" @change="change" :disabled="true"></ep-select>
            </view>
        </view>
		
		<view style="display: flex;justify-content: center;padding:10px;align-items: center;">
			<view style="width:30%;text-align: right;">搜索下拉：</view>
		    <view style="width:50%;">
                <ep-select filterable v-model="select3" :options="options" @change="change"></ep-select>
            </view>
		</view>
		
		<view style="display: flex;justify-content: center;padding:10px;align-items: center;">
			<view style="width:30%;text-align: right;">缓存输入：</view>
		    <view style="width:50%;">
                <ep-select filterable keep-input v-model="select4" :options="options" @change="change"></ep-select>
            </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: '',
				select2: '',
				select3: '',
                select4: '',
                options:[
                    {value:"1",label:"上海"},{value:"2",label:"深圳"},{value:"3",label:"广州",disabled:true}
                ],
			}
		},
		onLoad() {

		},
		methods: {
            change(e){
                console.log('select = ',this.select)
            },
		}
	}
</script>

<style>
	
</style>
